<template>
  <el-dialog
    custom-class="common-dialog lcs-dialog"
    :visible.sync="dialogVisible"
    width="780px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    title="落纱次数明细"
    destroy-on-close
    center
    @close="closeDialog"
  >
    <el-form label-position="top">
      <el-row
        type="flex"
        align="middle"
        :gutter="20"
        v-for="(item, i) in lcsList"
        :key="i"
      >
        <el-col :span="6">
          <el-form-item label="选择品种">
            <el-select
              size="small"
              placeholder="请选择"
              v-model="item.pz"
              disabled
            >
              <el-option
                v-for="(pz, pzi) in pzOption"
                :key="pzi"
                :label="pz"
                :value="pz"
            /></el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-row type="flex" align="middle">
            <el-form-item label="双号车">
              <el-input
                size="small"
                placeholder="请输入"
                v-model="item.lscs0"
                @change="updateLscsMul(item, '0')"
              >
                <template #append>落</template></el-input
              >
            </el-form-item>
            <el-form-item label="车台数量">
              <el-input
                size="small"
                placeholder="请输入"
                v-model="item.devSnNum0"
                disabled
              >
              </el-input>
            </el-form-item>
          </el-row>
        </el-col>
        <el-col :span="8">
          <el-row type="flex" align="middle">
            <el-form-item label="单号车">
              <el-input
                size="small"
                placeholder="请输入"
                v-model="item.lscs1"
                @change="updateLscsMul(item, '1')"
              >
                <template #append>落</template></el-input
              >
            </el-form-item>
            <el-form-item label="车台数量">
              <el-input
                size="small"
                placeholder="请输入"
                v-model="item.devSnNum1"
                disabled
              >
              </el-input>
            </el-form-item>
          </el-row>
        </el-col>
        <el-col :span="3">
          <el-form-item label="总次数">
            <span style="color:#292B3D;font-weight:bold"
              >{{ item.pzLscsNum }} 落</span
            >
            <!-- <el-button
              v-if="false"
              type="text"
              @click="delRow(i)"
              style="color:rgb(245,108,108);margin-left:10px;font-size:16px"
              ><i class="el-icon-remove-outline"
            /></el-button> -->
          </el-form-item>
        </el-col>
      </el-row></el-form
    >
    <el-row class="mb10 xs-line" type="flex" align="middle" :gutter="20">
      <div class="machine" v-for="(xs, x) in hcsList" :key="'xs' + x">
        <span style="margin-left: 10px">细纱机：</span>
        <div class="app-input">
          <el-row type="flex">
            <el-input
              class="devSn-single"
              v-model="xs.devSn"
              size="small"
              placeholder="请输入机台"
              @change="updateLscsSingle(xs)"
            ></el-input>
            <el-input
              size="small"
              v-model="xs.lscs"
              placeholder="请输入"
              @change="updateLscsSingle(xs)"
            >
              <template #append>落</template></el-input
            >
          </el-row>
        </div>
      </div>
      <div>
        <el-button class="border-btn" size="small" @click="addXs"
          >增行</el-button
        >
        <el-button
          v-show="hcsList.length > 0"
          class="border-btn gray"
          size="small"
          @click="delXs"
          >减行</el-button
        >
      </div></el-row
    >
    <div class="btn-list">
      <el-button class="border-btn">自动计算</el-button>
      <el-button type="primary" @click="dialogVisible = false">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getLscs, updateLscsSingle, updateLscsMul } from '@/api/dispatch';
export default {
  props: ['pzOption'],
  data() {
    return {
      dialogVisible: false,
      lcsList: [],
      hcsList: [{ devSn: '', lscs: '' }],
      search: {},
      date: '',
      sameBcFlag: '0'
    };
  },
  methods: {
    // 查询落纱次数
    async getLscs() {
      let params1 = {
        org: this.search.org,
        cj: this.search.cj,
        bc: this.search.bc,
        gongxu: '细纱',
        time: this.date,
        sameBcFlag: this.sameBcFlag
      };
      const res = await getLscs(params1);
      if (res.code == 1) {
        let { data } = res;
        this.lcsList = this.formatterArr(data['batch'], 'pz');
        this.hcsList = data['single'];
      }
    },
    // 落纱次数mul
    async updateLscsMul(row, flag) {
      let params = {};
      // 有传flag为车落纱修改
      if (flag) {
        if (row.pz) {
          params = {
            bc: this.search.bc,
            cj: this.search.cj,
            flag: flag,
            gongxu: '细纱',
            lscs: flag == '1' ? row.lscs1 : row.lscs0,
            pz: row.pz,
            org: this.search.org,
            time: this.date,
            sameBcFlag: this.sameBcFlag
          };
          const res = await updateLscsMul(params);
          if (res.code == 1) {
            this.$message.success('保存成功');
            this.getLscs();
          }
        }
      }
    },
    // 落纱次数single
    async updateLscsSingle(xs) {
      if (xs.lscs && xs.devSn) {
        let params = {
          bc: this.search.bc,
          cj: this.search.cj,
          devSn: xs.devSn,
          id: xs.id,
          flag: xs.id ? '3' : '1',
          gongxu: '细纱',
          lscs: xs.lscs,
          org: this.search.org,
          time: this.date,
          sameBcFlag: this.sameBcFlag
        };
        const res = await updateLscsSingle(params);
        if (res.code == 1) {
          this.getLscs();
          this.$message.success('修改成功');
        }
      }
    },
    show(search, date, sameBcFlag) {
      this.search = Object.assign({}, search);
      this.date = date;
      this.dialogVisible = true;
      this.sameBcFlag = sameBcFlag;
      this.getLscs();
    },
    addXs() {
      this.hcsList.push({ devSn: '', lscs: '' });
    },
    async delXs() {
      let row = this.hcsList.pop();
      if (row.devSn && row.lscs) {
        let params = {
          bc: this.search.bc,
          cj: this.search.cj,
          current_dh: row.current_dh,
          devSn: row.devSn,
          id: row.id,
          flag: '2',
          gongxu: '细纱',
          lscs: null,
          org: this.search.org,
          time: this.date,
          sameBcFlag: this.sameBcFlag
        };
        const res = await updateLscsSingle(params);
        if (res.code == 1) {
          this.getLscs();
          this.$message.success('修改成功');
        }
      }
    },
    formatterArr(arr, group_key) {
      let map = {};
      let res = [];
      for (let i = 0; i < arr.length; i++) {
        let ai = arr[i];
        if (!map[ai[group_key]]) {
          map[ai[group_key]] = [ai];
        } else {
          map[ai[group_key]].push(ai);
        }
      }
      Object.keys(map).forEach(key => {
        let obj = {};
        map[key].map(item => {
          if (item.flag) {
            obj.devSnNum1 = item.devSnNum;
            obj.lscs1 = item.lscs;
          } else {
            obj.devSnNum0 = item.devSnNum;
            obj.lscs0 = item.lscs;
          }
          obj.pz = item.pz;
          obj.pzLscsNum = item.pzLscsNum;
        });
        res.push(obj);
      });
      return res;
    },
    closeDialog() {
      this.hcsList = [{ devSn: '', lscs: '' }];
    }
  }
};
</script>

<style lang="scss">
.lcs-dialog {
  .xs-line {
    border-top: 1px dashed #cfd4d8;
    padding-top: 20px;
    margin-top: 20px;
    flex-wrap: wrap;
    & > div {
      margin-left: 10px;
      margin-bottom: 10px;
    }
  }
  .el-form--label-top .el-form-item__label {
    padding: 0;
    color: #3a4056;
    font-size: 13px;
  }
  .el-form-item {
    margin-bottom: 5px;
  }
  .el-form-item + .el-form-item {
    margin-left: 5px;
  }
  .el-form-item__content {
    line-height: unset;
  }
  .el-input.el-input-group--append {
    .el-input__inner {
      padding: 0 4px;
      border-right: none;
    }
    .el-input__inner:focus {
      border-color: #dcdfe6;
    }
    .el-input-group__append {
      padding: 0 10px;
      background: #fff;
      color: #292b3d;
      border-left: none;
      padding-left: 0;
    }
  }
  .machine {
    .app-input {
      width: 156px;
      display: inline-block;
      .devSn-single {
        width: 84px;
        margin: 0;
        flex-shrink: 0;
        .el-input__inner {
          padding: 0 4px;
          border-top-right-radius: 0;
          border-bottom-left-radius: 0;
        }
      }
      .el-row > .el-input.el-input--small:not(.devSn-single) {
        width: 72px;
        margin: 0;
        .el-input__inner {
          padding: 0 4px;
          border-right: none;
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
        }
      }
      .el-input__inner:focus {
        border-color: #dcdfe6;
      }
      .el-input-group__prepend {
        padding: 0;
        padding-left: 4px;
        background: #fff;
        border-right: none;
      }
      .el-input:last-child {
        .el-input__inner {
          border-right: none;
        }
      }
    }
  }
}
</style>
